
<template>
    <div>
        <el-form-item label="组件尺寸" v-if="Object.keys(data.options).indexOf('size')>=0">
            <el-select v-model="data.options.size">
                <el-option value="medium" label="medium"/>
                <el-option value="small" label="small"/>
                <el-option value="mini" label="mini"/>
            </el-select>
        </el-form-item>

        <el-form-item label="主题" v-if="Object.keys(data.options).indexOf('type')>=0">
            <el-select v-model="data.options.type">
                <el-option value="" label="primary"/>
                <el-option value="success" label="success"/>
                <el-option value="info" label="info"/>
                <el-option value="warning" label="warning"/>
                <el-option value="danger" label="danger"/>
            </el-select>
        </el-form-item>

        <el-form-item label="边框描边" v-if="Object.keys(data.options).indexOf('hit')>=0">
            <el-switch v-model="data.options.hit" />
        </el-form-item>
        <!-- 链接 -->
        <el-form-item label="链接方式" v-if="Object.keys(data.options).indexOf('linkType')>=0">
            <el-radio-group v-model="data.options.linkType">
                <el-radio-button label="inline">内链</el-radio-button>
                <el-radio-button label="outer">外链</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="链接地址" v-if="Object.keys(data.options).indexOf('linkUrl')>=0">
            <el-input v-model="data.options.linkUrl"/>
        </el-form-item>
        <el-form-item label="参数" v-if="Object.keys(data.options).indexOf('query')>=0">
            <el-input v-model="data.options.query"/>
        </el-form-item>
        
        <el-form-item label="图片方式" v-if="Object.keys(data.options).indexOf('imgType')>=0">
            <el-radio-group v-model="data.options.imgType">
                <el-radio-button label="image">图片</el-radio-button>
                <el-radio-button label="icon">icon</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排列方式" v-if="Object.keys(data.options).indexOf('textAlign')>=0">
            <el-select v-model="data.options.textAlign">
                <el-option value="left" label="左对齐"/>
                <el-option value="right" label="右对齐"/>
                <el-option value="center" label="居中"/>
            </el-select>
        </el-form-item>
        <el-form-item label="边框样式" v-if="Object.keys(data.options).indexOf('borderWidth')>=0">
            <el-form-item label="边框粗细：" v-if="Object.keys(data.options).indexOf('borderWidth')>=0">
                <el-input type="number" v-model="data.options.borderWidth"/>
            </el-form-item>
            <el-form-item label="边框颜色：" style="margin: 10px 0 0px;padding: 0" v-if="Object.keys(data.options).indexOf('borderColor')>=0">
                <el-color-picker
                    v-model="data.options.borderColor"
                />
            </el-form-item>
            <el-form-item label="边框样式："  style="margin: 10px 0 0px" v-if="Object.keys(data.options).indexOf('borderStyle')>=0">
                <el-select v-model="data.options.borderStyle">
                    <el-option value="solid" label="实线"/>
                    <el-option value="dashed" label="虚线"/>
                    <el-option value="dotted " label="点线"/>
                </el-select>
            </el-form-item>
        </el-form-item>
        
        <el-form-item label="圆角：" v-if="Object.keys(data.options).indexOf('borderRadius')>=0">
            <el-input style="width: 100px;" type="number" v-model="data.options.borderRadius"/>
        </el-form-item>
        <el-form-item label="底背景色：" v-if="Object.keys(data.options).indexOf('backgroundColor')>=0">
            <el-color-picker
                v-model="data.options.backgroundColor"
            />
        </el-form-item>
        <el-form-item label="透明度：" v-if="Object.keys(data.options).indexOf('opacity')>=0">
            <el-input
                v-model="data.options.opacity"
            />
        </el-form-item>
        <el-form-item label="底背景图：" v-if="Object.keys(data.options).indexOf('backgroundImage')>=0">
            <el-input style="width: 180px;" v-model="data.options.backgroundImage"/>
        </el-form-item>
        <el-form-item label="字体样式">
            <el-form-item label="字体颜色：" v-if="Object.keys(data.options).indexOf('fontColor')>=0">
                <el-color-picker
                    v-model="data.options.color"
                />
            </el-form-item>
            <el-form-item label="标题颜色：" v-if="Object.keys(data.options).indexOf('colorTitle')>=0 && data.type=='detailTitle'">
                <el-color-picker
                    v-model="data.options.colorTitle"
                />
            </el-form-item>
            <el-form-item label="字体颜色：" v-if="Object.keys(data.options).indexOf('colorContent')>=0 && data.type=='detailTitle'">
                <el-color-picker
                    v-model="data.options.colorContent"
                />
            </el-form-item>
            <el-form-item label="字体大小：" v-if="Object.keys(data.options).indexOf('fontSize')>=0">
                <el-input v-model="data.options.fontSize"/>
            </el-form-item>
            <el-form-item label="标题大小：" v-if="Object.keys(data.options).indexOf('fontSizeTitle')>=0 && data.type=='detailTitle'">
                <el-input v-model="data.options.fontSizeTitle"/>
            </el-form-item>
            <el-form-item label="文本大小：" v-if="Object.keys(data.options).indexOf('fontSizeContent')>=0 && data.type=='detailTitle'">
                <el-input v-model="data.options.fontSizeContent"/>
            </el-form-item>
            <el-form-item label="字体重量：" v-if="Object.keys(data.options).indexOf('fontWeight')>=0">
                <el-select v-model="data.options.fontWeight">
                    <el-option value="100" label="100"/>
                    <el-option value="200" label="200"/>
                    <el-option value="300" label="300"/>
                    <el-option value="400" label="400"/>
                    <el-option value="500" label="500"/>
                    <el-option value="600" label="600"/>
                    <el-option value="700" label="700"/>
                </el-select>
            </el-form-item>
        </el-form-item>
        
        <el-form-item label="背景色：" v-if="Object.keys(data.options).indexOf('tagColor')>=0">
            <el-color-picker
                v-model="data.options.tagColor"
            />
        </el-form-item>
        
        <el-form-item label="最小值" v-if="Object.keys(data.options).indexOf('min')>=0">
            <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"/>
        </el-form-item>
        <el-form-item label="最大值" v-if="Object.keys(data.options).indexOf('max')>=0">
            <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"/>
        </el-form-item>
        <el-form-item label="步长" v-if="Object.keys(data.options).indexOf('step')>=0">
            <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"/>
        </el-form-item>
        <el-form-item label="占位内容" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='BaseDateTime')">
            <el-input v-model="data.options.placeholder"/>
        </el-form-item>
        <el-form-item label="绑定Key值" v-if="data.type!='BaseGrid'&&data.type!='BaseMoban'">
            <el-input v-model="data.model"/>
        </el-form-item>
        <el-form-item label="操作属性"  v-if="data.type=='BaseInput' || data.type=='BaseRadio' || data.type=='BaseTextarea' || data.type=='BaseNumber'">
            <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读</el-checkbox>
            <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用	</el-checkbox>
            <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
            <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
            <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择</el-checkbox>
        </el-form-item>
        <el-form-item label="校验" v-if="data.type=='BaseInput' || data.type=='BaseRadio' || data.type=='BaseTextarea' || data.type=='BaseNumber'">
            <div>
                <el-checkbox v-model="data.options.required">必填</el-checkbox>
            </div>
            <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
                <el-option value="string" label="字符串"/>
                <el-option value="number" label="数字"/>
                <el-option value="boolean" label="布尔值"/>
                <el-option value="integer" label="整数"/>
                <el-option value="float" label="浮点数"/>
                <el-option value="url" label="URL地址"/>
                <el-option value="email" label="邮箱地址"/>
                <el-option value="hex" label="十六进制"/>
            </el-select>
            <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
                <el-input size="mini" v-model.lazy="data.options.pattern" style=" width: 240px;" placeholder="填写正则表达式"/>
            </div>
        </el-form-item>
    </div>
</template>

<script>
export default {
    name: 'CommonSetConfig',
    props: {
        data: {
            type: Object
        }
    },

    methods: {

    }
}
</script>

